<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>租赁管理</el-breadcrumb-item>
            <el-breadcrumb-item>车辆评论</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <!-- 搜索与添加区域 -->
            <el-row :gutter="20">
                <el-col :span="7">
                    <el-input placeholder="请输入内容" v-model="query" clearable>
                        <el-button slot="append"  @click="serch" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
                <!--<el-col :span="4">
                    <el-button type="primary" @click="addInfo">添加类型</el-button>
                </el-col>-->
            </el-row>
            <el-table
                    :data="tableData"
                    stripe
                    border
                    style="width: 100%;">
                <el-table-column
                        fixed
                        prop="id"
                        label="id"
                >
                </el-table-column>
                <el-table-column
                        prop="carname"
                        label="车辆名称"
                >
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名称"
                >
                </el-table-column>
                <el-table-column
                        prop="content"
                        label="评论"
                >
                </el-table-column>
                <el-table-column
                        prop="addtime"
                        label="评论时间"
                >
                </el-table-column>
                <el-table-column
                        prop="useNum"
                        label="点赞数"
                >
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作"
                        align="center"
                        width="120"
                >
                    <template slot-scope="scope">
                        <el-button type="danger" icon="el-icon-delete"  size="medium" @click="delInfo(scope.row.id,scope.row.status)" circle></el-button>
                        <!--<el-button type="success" icon="el-icon-s-tools" size="medium" @click=""  circle></el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

        </el-card>
    </div>
</template>

<script>
    export default {
        name: "comment",
        data(){
            return{
                //查询条件
                query:"",
                //当前页码
                currentPage: 1,
                //每页显示记录
                pageSize:5,
                //总条数
                total:0,
                //当前的记录数据
                tableData: [],

            }
        },
        //页面加载自动执行
        created() {
            this.initInfoTable(this.currentPage,this.pageSize);
        },
        methods: {

            //修改每页几条的方法
            handleSizeChange(val) {
                this.pageSize = val;
                this.initInfoTable(this.currentPage, this.pageSize);
            },
            //修改页数的方法
            handleCurrentChange(val) {
                this.currentPage = val;
                this.initInfoTable(this.currentPage, this.pageSize);
            },
            //模糊查询按钮的方法
            serch() {
                this.currentPage = 1;
                this.pageSize = 5;
                this.initInfoTable(this.currentPage, this.pageSize);
            },
            //初始化表格的方法
            initInfoTable(currentPage, pageSize) {
                var that = this;
                this.$http.post(`/hire/comment/findInfoByPage/${currentPage}/${pageSize}?query=${this.query}`).then(function (res) {
                    if (res.data.code == 200) {
                        that.tableData = res.data.data.records;
                        that.total = res.data.data.total;
                    } else {
                        that.$message.error("信息加载失败");
                    }
                })
            },

            //删除评论
            delInfo(id,status){
                var that=this;

                this.$confirm('是否删除该类型?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //that.$message.success("该车辆还未停用，不能删除！");
                    this.$http.get(`/hire/comment/delById/${id}`).then(function(resp){
                        if (resp.data.code == 200) {
                            //console.log(res);
                            if (that.total%that.pageSize==1){
                                that.currentPage--;
                            }else {
                                that.currentPage = that.currentPage;
                            }
                            that.$message.success(resp.data.msg);
                            that.initInfoTable(that.currentPage, that.pageSize);
                        } else {
                            that.$message.error(resp.data.msg);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
        }
    }
</script>

<style scoped>

</style>